<template>
  <div class="product">
    <section class="product-bg">
      <div class="product-bg-content">
        <div class="product-bg-title">智慧物联·高效稳定</div>
        <div class="product-bg-content-list">
          <div class="product-bg-content-list-item" v-for="(val, index) in advantageList" :key="index">
            <img :src="require(`@/static/product-icons/product-index-icon_${index}.png`)">
            <div class="product-bg-content-list-right">
              <div class="product-bg-content-list-right-title">{{ val.title }}</div>
              <div class="product-bg-content-list-right-des">{{ val.des }}</div>
            </div>
          </div>
        </div>
        <div class="product-bg-btn">
          <Consult />
        </div>
      </div>
    </section>
    <!-- 智能充电设备 -->
    <section class="box-charge-equip" id="equipIntroduce">
      <h2 class="charge-equip-title">智能充电设备</h2>
      <h3 class="charge-equip-subTitle">匠心智造，设计/研发/生产全流程打造专业充电产品</h3>
      <div class="charge-equip-content">
        <img class="product-equip-img product-equip-img-mobile" src="@/static/product-equip_1.png">
        <div class="charge-equip-content-both">
          <div class="charge-equip-content-both-title">10路智能充电桩</div>
          <div class="charge-equip-content-both-name">方大白 D3</div>
          <div class="charge-equip-content-both-line"></div>
          <div class="charge-equip-content-both-des">注塑一体成型，美观大方</div>
          <div class="charge-equip-content-both-des">智慧物联，在线扫码/刷卡全支持</div>
          <div class="charge-equip-content-both-btn">
            <nuxt-link :to="{ path: `/product/detail/1` }">
              <Consult text="了解详情" />
            </nuxt-link>
          </div>
        </div>
        <img class="product-equip-img product-equip-img-pc" src="@/static/product-equip_1.png">
        <div class="charge-equip-content-both">
          <div class="charge-equip-content-both-title">大功率智能充电插座</div>
          <div class="charge-equip-content-both-name">叮小双 S1</div>
          <div class="charge-equip-content-both-line"></div>
          <div class="charge-equip-content-both-des">安装方便，布置灵活</div>
          <div class="charge-equip-content-both-des">单路最大输出功率2000W</div>
          <div class="charge-equip-content-both-btn">
            <nuxt-link :to="{ path: `/product/detail/2` }">
              <Consult text="了解详情" />
            </nuxt-link>
          </div>
        </div>
      </div>
    </section>
    <!-- 充电小程序 -->
    <section class="box-charge-applets" id="chargeApplets">
      <h2 class="charge-applets-title">充电小程序</h2>
      <h3 class="charge-applets-subTitle">为百万用户提供服务，使用方便体验好，扫一扫即享即用</h3>
      <div class="charge-applets-content">
        <img src="@/static/product-charge-applets_1.png" />
        <div class="charge-applets-content-right">
          <div class="charge-applets-content-item" v-for="(val, index) in chargeAppletsList" :key="index">
            <div class="charge-applets-content-title">{{ val.title }}</div>
            <div class="charge-applets-content-des">{{ val.des }}</div>
          </div>
        </div>
      </div>
    </section>
    <!-- 全方位数字化运营平台 -->
    <section class="box-digital-platform" id="operationPlatform">
      <h2 class="digital-platform-title">全方位数字化运营平台</h2>
      <h3 class="digital-platform-subTitle">为上千家客户提供解决方案，更专注运营本身，更懂运营商</h3>
      <div class="digital-platform-icons">
        <div class="digital-platform-icons-item" v-for="(val, index) in iconsList" :key="index">
          <img :src="require(`@/static/product-icons/product-icon_${index}.png`)">
          <div class="digital-platform-icons-title">{{ val }}</div>
        </div>
      </div>
    </section>
    <!-- 全方位数字化平台优点 -->
    <section class="box-digital-platform-feature">
      <div class="digital-platform-feature" v-for="(item, key) in featureList" :key="key">
        <img v-show="!(key % 2) && !isMobile" :src="require(`@/static/product-digital_${key}.png`)" />
        <img v-show="isMobile" :src="require(`@/static/product-digital_${key}.png`)" />
        <div class="digital-platform-feature-content">
          <div class="digital-platform-feature-content-title">{{ item.title }}</div>
          <div class="digital-platform-feature-content-subTitle">{{ item.subTitle }}</div>
          <div class="digital-platform-feature-content-des" v-for="(val, index) in item.des" :key="index">
            <span class="digital-platform-feature-content-icon"></span>
            <span class="digital-platform-feature-content-des-text">{{ val }}</span>
          </div>
        </div>
        <img v-show="key % 2 && !isMobile" :src="require(`@/static/product-digital_${key}.png`)" />
      </div>
    </section>
    <!-- 不仅提供产品，更助力客户成功 -->
    <section class="box-customer" id="usService">
      <h2 class="customer-title">不仅提供产品，更助力客户成功</h2>
      <div class="customer-content">
        <div class="customer-content-item" v-for="(val, index) in customerList" :key="index">
          <img :src="require(`@/static/product-customer_${index}.png`)" />
          <div class="customer-content-title">{{ val.title }}</div>
          <div class="customer-content-des">{{ val.des }}</div>
        </div>
      </div>
    </section>
    <!-- 专利 -->
    <Patent id="patentCertificate" />
  </div>
</template>

<script>
import { browserRedirect } from '@/components/mobileConsult.js'
export default {
  name: 'product',
  data () {
    return {
      advantageList: [
        {
          title: '物联网充电设备',
          des: '更智能更可靠'
        },
        {
          title: '数字化运营平台',
          des: '更强大更放心'
        },
        {
          title: '专业化服务支持',
          des: '更给力更专注'
        }
      ],
      chargeAppletsList: [
        {
          title: '扫码充电',
          des: '充满自停/固定时长随意选择，手机实时查看充电进度'
        },
        {
          title: '我的钱包',
          des: '在线余额充值，购买各种电子卡，实体卡绑定/充值/挂失'
        },
        {
          title: '站点地图',
          des: '查看附近的充电站点及可用充电接口，一键导航'
        },
        {
          title: '客服中心',
          des: '电话/在线客服，自助报修设备、反馈问题'
        }
      ],
      iconsList: [],
      iconsListPc: ['设备管理', '站点管理', '订单管理', '资金管理', '营销管理', '分成管理', '商家管理', '外勤签到', '日程提醒', '监控告警', '工单管理', '拓展管理', '站点片区', '站点公告', '电表抄录', '账单明细', '储值/套餐卡', '实体卡', '员工管理', '更多功能'],
      iconsListMobile: ['设备管理', '站点管理', '订单管理', '资金管理', '营销管理', '分成管理', '商家管理', '外勤签到', '日程提醒', '监控告警', '工单管理',  '更多功能'],
      featureList:[
        {
          title: '保证设备可用率',
          subTitle: '稳定可靠连接，安心充电',
          des: [
            '分布式高并发物联网架构平台，支持百万设备在线',
            '设备工作状态实时查看，历史充电记录和功率曲线永久留存',
            '通过手机可以远程控制设备通电/断电，一切尽在掌握中',
            '设备离线/闲置/异常开启/功率过大等多种告警，实时通知'
          ]
        },
        {
          title: '拉升客单价',
          subTitle: '多种计费方案，行业客单价标杆',
          des: [
            '分功率多档计费，保证基本收入',
            '充满自停/结束退款/小额支付/最低消费等10+项计费精细化配置项',
            '针对不同站点场景，提供多种应对方案，支撑收入最大化'
          ]
        },
        {
          title: '降低回本周期',
          subTitle: '丰富的营销玩法，提高资金周转率',
          des: [
            '线上电子卡，扫一扫即可购买，有效回笼资金',
            '线下实体卡，充值续费更容易，挂失冻结更方便',
            '储值模式，支持多档储值和赠送营销方案',
            '套餐模式，支持月卡/次卡自由配置，提高用户粘性'
          ]
        },
        {
          title: '保障资金安全',
          subTitle: '资金实时结算，多级分账支持',
          des: [
            '行业内率先接入资金监管平台，平台不碰资金，直接到商户账户',
            '实时结算，实时提现，不压资金',
            '资金日账单/月账单，收入支出清晰合理，对账方便',
            '强大的分成分账功能，可设置多个分成方和分成比例，帮助商户与伙伴合作共赢'
          ]
        },
        {
          title: '提高运营效率',
          subTitle: '运营全管理流程覆盖，站点/设备/人员/资金尽在掌握',
          des: [
            '外勤签到/签退可视化，业务员和运维工人动态一目了然',
            '电表抄录/电费结算全数字化，运营成本尽在掌控',
            '使用工单记录巡检维修/配件更换运维工作，提升运维效率和服务质量',
            '精细化的员工权限，适合中大型运营商管理',
            '站点经营分析、盈亏计算、优化建议，数字智能助你降本增益'
          ]
        }
      ],
      customerList: [
        {
          title: '专业客服',
          des: '7*24小时一对一客服，全程在线服务'
        },
        {
          title: '贴心顾问',
          des: '为客户提供投放前期的专属服务'
        },
        {
          title: '运营培训',
          des: '针对客户情况定制运营方案并提供代运营服务'
        },
        {
          title: '技术支持',
          des: '提供OEM贴牌及定制化开发服务'
        }
      ],
      isMobile: false
    }
  },
  mounted () {
    this.isMobile = browserRedirect()
    this.iconsList = browserRedirect() ? this.iconsListMobile : this.iconsListPc
  },
  methods: {
    btnDetail (val) {
      this.$router.push({ path: `/product/detail/${val}` })
    }
  },
  head() {
    return {
      title: '电动自行车充电桩产品服务介绍-叮叮充电桩',
      meta: [
        {
          hid: 'keywords',
          name: 'keywords',
          content: '叮叮智能电动自行车充电桩产品技术,硬件产品使用功能,多场景安装方案'
        },
        {
          hid: 'description',
          name: 'description',
          content: '叮叮电动自行车充电桩产品介绍提供了智能扫码/刷卡10路机、智能大功率双控插座、平台运营的介绍以及如何经营充电桩，让您更好的了解叮叮智能充电桩的产品与服务，更好的经营好充电桩业务。'
        }
      ]
    }
  }
}
</script>

<style lang="sass" scoped>
@media screen and (min-width: 750px)
  .titleStyle
    width: 100%
    text-align: center
    margin: 60px auto 0px
    color: #282C32
    font-size: 32px
    line-height: 48px
    font-weight: 400
  .subTitleStyle
    width: 100%
    margin: 0 auto
    text-align: center
    color: rgba(48, 54, 64, 0.7)
    font-size: 18px
    line-height: 30px
  .product
    width: 100%
    height: auto
    .product-bg
      clear: both
      overflow: hidden
      min-width: 1180px
      .product-bg-content
        clear: both
        overflow: hidden
        width: 1180px
        height: 464px
        margin: 0 auto
        background: url('../../static/product_1.png') no-repeat
        background-size: 100% 100%
        .product-bg-title
          color: #282C32
          font-size: 48px
          line-height: 68px
          margin-bottom: 48px
          margin-top: 64px
          text-align: center
          font-weight: bolder
        .product-bg-content-list
          width: 900px
          margin: 0 auto
          display: flex
          flex-direction: row
          justify-content: space-between
          .product-bg-content-list-item
            display: flex
            flex-direction: row
            width: 300px
            img
              width: 52px
              height: 54px
              margin-right: 8px
              margin-top: 5px
            .product-bg-content-list-right
              .product-bg-content-list-right-title
                color: #282C32
                font-size: 20px
                line-height: 32px
                margin-bottom: 4px
              .product-bg-content-list-right-des
                color: rgba(48, 54, 64, 0.7)
                font-size: 16px
                line-height: 22px
        .product-bg-btn
          text-align: center
          margin-top: 64px
    .box-charge-equip
      min-width: 1180px
      height: 634px
      background: rgba(247, 247, 247, 1)
      clear: both
      overflow: hidden
      .charge-equip-title
        @extend .titleStyle
      .charge-equip-subTitle
        @extend .subTitleStyle
        margin: 16px auto 40px
      .charge-equip-content
        width: 1180px
        margin: 0 auto
        display: flex
        flex-direction: row
        justify-content: space-between
        .product-equip-img
          width: 420px
          height: 380px
        .product-equip-img-mobile
          display: none
        .charge-equip-content-both
          padding-top: 56px
          .charge-equip-content-both-title
            color: #F57033
            font-size: 18px
            line-height: 30px
            margin-bottom: 4px
          .charge-equip-content-both-name
            color: #282C32
            font-size: 32px
            line-height: 48px
            margin-bottom: 20px
          .charge-equip-content-both-line
            width: 48px
            height: 5px
            background: #F57033
            margin-bottom: 20px
          .charge-equip-content-both-des
            color: rgba(48, 54, 64, 0.7)
            font-size: 18px
            line-height: 30px
            margin-bottom: 10px
          .charge-equip-content-both-btn
            margin-top: 30px
    .box-charge-applets
      min-width: 1180px
      height: 614px
      clear: both
      overflow: hidden
      .charge-applets-title
        @extend .titleStyle
      .charge-applets-subTitle
        @extend .subTitleStyle
        margin: 8px auto 48px
      .charge-applets-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        img
          width: 480px
          height: 360px
        .charge-applets-content-right
          .charge-applets-content-item
            width: 400px
            margin-bottom: 24px
            .charge-applets-content-title
              color: #282C32
              font-size: 26px
              margin-bottom: 8px
              line-height: 32px
              margin-bottom: 8px
            .charge-applets-content-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
    .box-digital-platform
      min-width: 1180px
      clear: both
      overflow: hidden
      background: #F8F8F8
      .digital-platform-title
        @extend .titleStyle
      .digital-platform-subTitle
        @extend .subTitleStyle
        margin: 8px auto 48px
      .digital-platform-icons
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 30px
        justify-content: space-around
        .digital-platform-icons-item
          flex: 0 0 118px
          text-align: center
          img
            width: 88px
            height: 88px
          .digital-platform-icons-title
            color: #737373
            font-size: 14px
            line-height: 20px
            margin-bottom: 50px
    .box-digital-platform-feature
      min-width: 1180px
      clear: both
      overflow: hidden
      padding-bottom: 30px
      .digital-platform-feature
        width: 1180px
        margin: 0 auto
        margin-top: 80px
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-around
        img
          width: 480px
          height: 340px
        .digital-platform-feature-content
          width: 480px
          .digital-platform-feature-content-title
            color: #282C32
            font-size: 30px
            line-height: 48px
            margin-bottom: 8px
            font-weight: bolder
          .digital-platform-feature-content-subTitle
            color: #F57033
            font-size: 20px
            line-height: 28px
            margin-bottom: 32px
          .digital-platform-feature-content-des
            margin-bottom: 16px
            .digital-platform-feature-content-icon
              width: 12px
              height: 12px
              background: #DFE2E5
              border-radius: 2px
              display: inline-block
            .digital-platform-feature-content-des-text
              color: rgba(48, 54, 64, 0.7)
              font-size: 16px
              line-height: 24px
    .box-customer
      min-width: 1180px
      height: 460px
      clear: both
      overflow: hidden
      background: #F8F8F8
      .customer-title
        @extend .titleStyle
        margin-bottom: 60px
      .customer-content
        margin: 0 auto
        width: 1180px
        display: flex
        flex-direction: row
        justify-content: space-around
        .customer-content-item
          flex: 0 0 25%
          text-align: center
          img
            width: 80px
            height: 80px
            margin-bottom: 20px
          .customer-content-title
            color: #282C32
            font-size: 24px
            line-height: 32px
            margin-bottom: 8px
          .customer-content-des
            width: 160px
            color: rgba(48, 54, 64, 0.7)
            font-size: 16px
            line-height: 24px
            margin: 0 auto
</style>
<style lang="sass" scoped>
@media screen and (max-width: 750px)
  .titleStyle
    width: 100vw
    margin: 0 auto
    text-align: center
    margin: 24px auto 8px
    color: #282C32
    font-size: 28px
    font-weight: bolder
  .subTitleStyle
    width: 100vw
    margin: 0 auto
    text-align: center
    color: rgba(48, 54, 64, 0.7)
    font-size: 14px
  .product
    width: 100vw
    height: auto
    .product-bg
      clear: both
      overflow: hidden
      width: 100vw
      .product-bg-content
        clear: both
        overflow: hidden
        width: 100vw
        height: 62vw
        margin: 0 auto
        background: url('../../static/product_1.png') no-repeat
        background-size: 100% 100%
        .product-bg-title
          color: #282C32
          font-size: 24px
          line-height: 24px
          margin-bottom: 20px
          margin-top: 60px
          text-align: center
          font-weight: bolder
        .product-bg-content-list
          width: 90vw
          margin: 0 auto
          display: flex
          flex-direction: row
          justify-content: space-between
          .product-bg-content-list-item
            display: flex
            flex-direction: row
            width: 30vw
            img
              width: 28px
              height: 28px
              margin-right: 2px
              margin-top: 0px
            .product-bg-content-list-right
              .product-bg-content-list-right-title
                color: #282C32
                font-size: 10px
                line-height: 10px
                margin-bottom: 4px
              .product-bg-content-list-right-des
                color: rgba(48, 54, 64, 0.7)
                font-size: 8px
                line-height: 10px
        .product-bg-btn
          text-align: center
          margin-top: 30px
    .box-charge-equip
      width: 100vw
      height: auto
      background: rgba(247, 247, 247, 1)
      clear: both
      overflow: hidden
      .charge-equip-title
        @extend .titleStyle
      .charge-equip-subTitle
        @extend .subTitleStyle
        margin: 0px auto 10px
      .charge-equip-content
        width: 90vw
        margin-left: 5vw
        .product-equip-img
          width: 90vw
          height: 81vw
        .product-equip-img-pc
          display: none
        .charge-equip-content-both
          padding-top: 16px
          width: 90vw
          text-align: center
          .charge-equip-content-both-title
            color: #F57033
            font-size: 16px
            line-height: 30px
            margin-bottom: 4px
          .charge-equip-content-both-name
            color: #282C32
            font-size: 28px
            line-height: 28px
            margin-bottom: 12px
          .charge-equip-content-both-line
            width: 96px
            height: 5px
            background: #F57033
            margin: 0 auto 20px
          .charge-equip-content-both-des
            color: rgba(48, 54, 64, 0.7)
            font-size: 16px
            line-height: 18px
            margin-bottom: 10px
          .charge-equip-content-both-btn
            margin: 12px auto 12px
    .box-charge-applets
      min-width: 100vw
      height: auto
      clear: both
      overflow: hidden
      .charge-applets-title
        @extend .titleStyle
      .charge-applets-subTitle
        @extend .subTitleStyle
        margin: 8px auto 12px
      .charge-applets-content
        margin: 0 auto
        width: 90vw
        margin-left: 5vw
        img
          width: 90vw
          height: 67.5vw
          margin-bottom: 12px
        .charge-applets-content-right
          .charge-applets-content-item
            width: 90vw
            margin-bottom: 22px
            .charge-applets-content-title
              color: #282C32
              font-size: 18px
              margin-bottom: 8px
              line-height: 18px
            .charge-applets-content-des
              color: rgba(48, 54, 64, 0.7)
              font-size: 14px
    .box-digital-platform
      width: 100vw
      height: auto
      clear: both
      overflow: hidden
      background: #F8F8F8
      .digital-platform-title
        @extend .titleStyle
      .digital-platform-subTitle
        @extend .subTitleStyle
        margin: 8px auto 18px
      .digital-platform-icons
        margin: 0 auto
        width: 90vw
        margin-left: 5vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        margin-bottom: 20px
        justify-content: space-around
        .digital-platform-icons-item
          flex: 0 0 30vw
          text-align: center
          img
            width: 80px
          .digital-platform-icons-title
            color: #737373
            font-size: 16px
            line-height: 14px
            margin-bottom: 30px
    .box-digital-platform-feature
      min-width: 100vw
      height: auto
      clear: both
      overflow: hidden
      .digital-platform-feature
        width: 90vw
        margin-left: 5vw
        margin-top: 20px
        margin-bottom: 50px
        img
          width: 90vw
          height: 63.75vw
          margin-bottom: 30px
        .digital-platform-feature-content
          width: 90vw
          .digital-platform-feature-content-title
            color: #282C32
            font-size: 20px
            line-height: 18px
            margin-bottom: 10px
            font-weight: bolder
          .digital-platform-feature-content-subTitle
            color: #F57033
            font-size: 16px
            line-height: 20px
            margin-bottom: 12px
          .digital-platform-feature-content-des
            margin-bottom: 12px
            display: flex
            .digital-platform-feature-content-icon
              width: 12px
              height: 12px
              margin-top: 3px
              margin-right: 6px
              background: #DFE2E5
              border-radius: 2px
              display: inline-block
            .digital-platform-feature-content-des-text
              color: rgba(48, 54, 64, 0.7)
              font-size: 12px
              line-height: 20px
    .box-customer
      width: 100vw
      height: auto
      clear: both
      overflow: hidden
      background: #F8F8F8
      .customer-title
        @extend .titleStyle
        font-size: 24px
        margin-bottom: 10px
      .customer-content
        margin-left: 5vw
        width: 90vw
        display: flex
        flex-direction: row
        flex-wrap: wrap
        justify-content: space-around
        margin-bottom: 18px
        .customer-content-item
          width: 45vw
          text-align: center
          margin-bottom: 20px
          img
            width: 50px
            height: 50px
            margin-bottom: 10px
          .customer-content-title
            color: #282C32
            font-size: 16px
            line-height: 24px
            margin-bottom: 0px
          .customer-content-des
            width: 30vw
            margin-left: 1.25vw
            color: rgba(48, 54, 64, 0.7)
            font-size: 12px
            line-height: 20px
            margin: 0 auto
</style>
